import React from 'react';
import { useNavigate } from 'react-router-dom';
import { cn, downloadMuseumArtifactsAsPDF } from '@/lib/utils';
import { museumData } from '@/components/Sidebar';


// 河南博物院封面组件
export default function HenanMuseumCover() {
  const navigate = useNavigate();
  
  // PDF下载功能
  const handleDownloadPDF = () => {
    // 下载当前博物馆的所有文物内容为PDF
    downloadMuseumArtifactsAsPDF('henan', '河南博物院');
  };
  
  return (
    <div className="relative w-full max-w-md mx-auto bg-white rounded-3xl shadow-2xl overflow-hidden" id="henan-museum-content">
      {/* 顶部装饰条 */}
      <div className="h-4 bg-gradient-to-r from-amber-500 to-orange-600"></div>
      
      {/* 主视觉区域 */}
      <div className="p-6">
        {/* 标题区域 */}
        <div className="text-center mb-4">
          <span className="inline-block px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-sm font-medium mb-3">
            华夏文明 • 历史瑰宝
          </span>
          <h1 className="text-3xl font-bold text-gray-900 mb-2">河南博物院<br />文物教育资料</h1>
          <p className="text-gray-600 text-lg">探索中原文明的起源与发展</p>
        </div>
        
        {/* 文物图片展示 */}
        <div className="relative rounded-2xl overflow-hidden mb-6 shadow-lg transform transition-transform hover:scale-[1.02] duration-300">
          <img 
            src="https://lf-code-agent.coze.cn/obj/x-ai-cn/279122722562/attachment/1_20250926161405.jpg" 
            alt="河南博物院贾湖骨笛" 
            className="w-full h-64 object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent flex items-end">
            <p className="text-white p-4 text-lg font-medium">贾湖骨笛 • 新石器时代</p>
          </div>
        </div>
        
        {/* 特点列表 */}
        <div className="space-y-3 mb-8">
          <div className="flex items-center">
            <div className="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center mr-3 flex-shrink-0">
              <i className="fa-solid fa-check text-amber-500"></i>
            </div>
            <p className="text-gray-700">9件镇馆之宝详细解析</p>
          </div>
          <div className="flex items-center">
            <div className="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center mr-3 flex-shrink-0">
              <i className="fa-solid fa-check text-amber-500"></i>
            </div>
            <p className="text-gray-700">互动式历史学习体验</p>
          </div>
          <div className="flex items-center">
            <div className="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center mr-3 flex-shrink-0">
              <i className="fa-solid fa-check text-amber-500"></i>
            </div>
            <p className="text-gray-700">适合打印的教育资料</p>
          </div>
        </div>
        
        {/* 行动按钮 */}
         <button 
           onClick={handleDownloadPDF}
           className="w-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-bold py-4 px-6 rounded-2xl shadow-lg transform transition-all hover:scale-[1.02] hover:shadow-xl active:scale-[0.98] flex items-center justify-center text-lg"
         >
           <i className="fa-solid fa-file-pdf mr-2"></i> 下载所有文物资料
         </button>
        
        {/* 底部装饰 */}
        <div className="mt-6 text-center text-xs text-gray-400">
          <p>中华文明发源地 | 河南博物院教育项目</p>
        </div>
      </div>
      
      {/* 装饰元素 */}
      <div className="absolute -right-10 top-20 w-24 h-24 bg-amber-100 rounded-full opacity-50 blur-xl"></div>
      <div className="absolute -right-5 bottom-40 w-16 h-16 bg-orange-100 rounded-full opacity-50 blur-lg"></div>
    </div>
  );
}